<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    h1 {
      text-align: center;
    }

    table {
      width: 700px;
      margin: 20px auto;
    }

    td {
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>学员信息表</h1>
  <table border="1">
    <thead>
      <tr>
        <th>用户名</th>
        <th>邮箱</th>
        <th>手机</th>
        <th>创建时间</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody id="mytbody">
      <tr>
        <td>收到</td>
        <td>113@qq.com</td>
        <td>收到</td>
        <td>收到</td>
        <td>收到</td>
      </tr>
    </tbody>
  </table>
  <script>

    // ajax post传参 

    var xhr = null;
    try {
      xhr = new XMLHttpRequest()
    } catch (err) {
      xhr = new ActiveXObject("Microsoft.XML")
    }
    // 调用open
    xhr.open("post", "http://127.0.0.1:3000/VueHandler/AdminHandler?action=usershow", true)
    // 调用send
    // post 传参 在send(参数)方法传参
    // post传参之前设置请求头 
    //1. 表单类型的数据  name=1&age=2
    // xhr.setRequsetHeader("Content-type", "application/x-www-form-urlencoded")
    //2.json类型的数据  {name:1,age:2}
    // xhr.setRequsetHeader("Content-type", "application/json")
    // 3.文件类型的数据   FormData数据包
    // xhr.setRequsetHeader("Content-type", "multipart/form-data")
    // 设置请求头 的内容  提前发送到服务器端的键值对
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    xhr.send("pageStart=2")

    // 等待数据返回
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(JSON.parse(xhr.responseText))
        var res = JSON.parse(xhr.responseText);
        var list = res.data.list;
        var str = "";
        for (var i = 0; i < list.length; i++) {
          str += `
           <tr>
              <td>${list[i].userName}</td>
              <td>${list[i].email}</td>
              <td>${list[i].phone}</td>
              <td>${new Date(list[i].createAt).toLocaleString()}</td>
              <td>${list[i].isstate ? "已冻结" : "可用"}</td>
            </tr>
          `
        }
        var mytbody = document.getElementById("mytbody");
        mytbody.innerHTML = str;
      }
    }




  </script>
</body>

</html>